<template>
	<div class="shoppingcart">
		<div class="shopingcart-header">
			<el-row>
				<el-col :span="1" :offset="2" class="el-icon-shopping-cart-full"></el-col>
				<el-col :span="3" style="margin-top: 20px;">
					<h3>我的购物车</h3>
				</el-col>
			</el-row>
		</div>
		<div>
			<el-row>
				<el-col :span="19" :offset="2">
					<el-table :data="tableData" :header-cell-style="{background:'#f3f3f3'}" style="width: 100%;"
							  @select="sel=>this.selection=sel" @select-all="sel=>this.selection=sel"
					ref="table">
						<el-table-column label="全选" width="50" type="selection" align="center">
						</el-table-column>
						<el-table-column label="参考图片" width="150">
							<template slot-scope="scope">
								<el-image style="width: 120px; height: 100px" :src="`http://localhost:8080/res/${scope.row.food.food_img}`" fit="cover"></el-image>
							</template>
						</el-table-column>
						<el-table-column prop="food.food_name" label="商品名称" width="150">
						</el-table-column>
						<el-table-column label="分类" width="120">
							<template slot-scope="scope">
								{{numToName(scope.row.food.food_kind_id)}}
							</template>
						</el-table-column>
						<el-table-column prop="detail_attach" label="菜品口味" width="120">
						</el-table-column>
						<el-table-column label="数量" width="250">
							<template slot-scope="scope">
								<el-input-number size="small" v-model="scope.row.food_amount" :min="1" @change="((r1,r2)=>{numChange(r1,r2,scope.row)})"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column prop="food.food_price" label="价格" width="130">
						</el-table-column>
						<el-table-column label="总价" width="130">
							<template slot-scope="scope">{{scope.row.food_amount*scope.row.food.food_price}}</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="handleClick(scope.$index,scope.row.shopping_cart_detail_id)" type="danger" size="mini" class="el-icon-delete">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<el-row style="margin-top: 50px">
				<el-col :span="18" align="right">
					已选中 {{total_number}} 件商品，共计: {{prices}} ￥
					<el-button @click="submitOrder" type="primary">提交订单</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import ShoppingCartService from "./ShoppingCartService";
	import FoodCategoryService from "../FoodCategory/FoodCategoryService";
	export default {
		name: 'ShoppingCart',
		data() {
			return {
				tableData:[],
				selection:[],
				kinds:[{food_kind_id: 1,food_kind_name:'炒饭'}],
			}
		},
		created() {
			this.axios.get(this.$g.foodkind).then(res=>{
				this.kinds=res.data.foodkindList;
				ShoppingCartService.showCart(res=>{
					this.tableData=res.cart.details;
					//console.log(this.tableData);
					this.$nextTick(()=>{this.$refs.table.toggleAllSelection();});
				});
			});
		},
		methods: {
			//修改菜品的分类
			numToName(value){
				let kind = this.kinds.find(cur=>{
					return cur.food_kind_id==value;
				});
				return kind.food_kind_name;
			},
			handleClick(index,shopping_cart_detail_id) {
				this.$confirm('是否删除该菜品?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
				  //删除数据库中的数据
					ShoppingCartService.deleteCartDetail({
            shopping_cart_detail_id:shopping_cart_detail_id
					},r=>{
					  console.log(r.msg);
						if(r.msg){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
						}else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
						}
					})
					this.tableData.splice(index,1);
					this.selection.splice(index,1);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/*订单提交跳转到下个页面
			*/
			submitOrder() {
				if(this.selection.length!=0){
					//计算每样被选中的商品明细的总价
					this.selection.forEach(detail=>{
						detail.total_cost=detail.food_amount*detail.food.food_price;
					});
					this.$router.push({
						name: 'Order',
						params:{
							sel:this.selection,//选中的商品
							totalPrice:this.prices,//选中商品的总价
						},
					});
				}else{
					this.$message.error('您未选择商品哦');
				}
			},
      numChange(currentValue, oldValue, shoppingCartDetail){
				console.log(currentValue, oldValue, shoppingCartDetail);
				if(currentValue>oldValue){
				  FoodCategoryService.addshoppingcartdetail({
            food_id: shoppingCartDetail.food_id,
            food_amount: currentValue-oldValue,
            total_cost: (currentValue-oldValue)*shoppingCartDetail.food.food_price,
            detail_attach: shoppingCartDetail.detail_attach
				  },r=>{

				  })
				}else if(oldValue>currentValue){
					ShoppingCartService.delshoppingcartdetail({
            food_id: shoppingCartDetail.food_id,
            food_amount: oldValue-currentValue,
            total_cost: (oldValue-currentValue)*shoppingCartDetail.food.food_price,
            detail_attach: shoppingCartDetail.detail_attach
					},r=>{

					})
				}
      }
		},
		computed:{
			total_number(){
				let number=0;
				this.selection.forEach(detail=>{
					number+=detail.food_amount;
				});
				return number;
			},
			prices(){
				let total=0;
				this.selection.forEach(detail=>{
					total+=detail.food_amount*detail.food.food_price;
				});
				return total;
			},
		},
	}
</script>

<style>
	.shopingcart-header{
		margin: 20px 0;
	}
	.el-icon-shopping-cart-full {
		font-size: 65px;
	}
</style>
